<template>
  <div
    class="plane z-30"
    :style="{
      display: clientRects.display,
      transform: `translate(${clientRects.left}px, ${clientRects.top}px)`,
    }"
  >
    <p>名称：{{ clientRects.label }}</p>
  </div>

  <div class="absolute bottom-14 right-0 bg-gray-100 p-3 cursor-pointer">
    <button
      class="flex items-center justify-center rounded-lg"
      @click="handleResetScene"
    >
      重置位置
    </button>
  </div>

  <div class="absolute bottom-0 right-0 bg-gray-100 p-3">
    <label
      @click.prevent="handleChange"
      class="flex items-center cursor-pointer"
    >
      <input
        class="w-5 h-5 flex items-center justify-center rounded-lg pointer-events-none"
        :checked="isPointerEvent"
        type="checkbox"
      />
      <span class="ml-2">是否响应鼠标事件</span>
    </label>
  </div>
</template>
<script lang="ts" setup>
import { Box3, Color, Object3D } from "three";
import { Ref, ref } from "vue";
import { DefaultSelectOperate } from "../utils/SelectOperate";
import { defaultInitScene } from "../utils/InitScene";
let timeout: any = null;
let isPointerEvent: Ref<boolean> = ref(false);
type ClientRects = {
  display: string;
  left: number;
  top: number;
  label: string;
};
const clientRects: Ref<ClientRects> = ref({
  display: "none",
  left: 0,
  top: 0,
  label: "",
});
DefaultSelectOperate.addEventListener("mouseleave", (e: any) => {
  if (isPointerEvent.value) {
    let object = e.data;
    object.material.color = object.material["color_mark"];
    delete object.material["color_mark"];
    timeout = setTimeout(() => {
      clientRects.value.display = "none";
      clearTimeout(timeout);
    }, 500);
  }
});
DefaultSelectOperate.addEventListener("mouseenter", (e: any) => {
  if (isPointerEvent.value) {
    let { object, x, y } = e.data;
    timeout && clearTimeout(timeout);
    object.material["color_mark"] = object.material.color;
    object.material.color = new Color(0x333333);
    clientRects.value.display = "block";
    console.log(object.userData.name);
    clientRects.value.label = object.userData.name;
    changeClientRects(x, y);
  }
});

DefaultSelectOperate.addEventListener("mousemove", (e: any) => {
  if (isPointerEvent.value) {
    let { x, y } = e.data;
    changeClientRects(x, y);
  }
});
function changeClientRects(x: number, y: number) {
  clientRects.value.left = x;
  clientRects.value.top = y;
}
function handleChange() {
  isPointerEvent.value = !isPointerEvent.value;
}
function handleResetScene() {
  defaultInitScene.resetScene();
}
</script>

<style scoped>
.plane {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px 18px;
  transform: translate(12px, -100%);
  display: none;
  pointer-events: none;
}
</style>
